<style>
    body {
        background-color: #ffffff;
    }
</style>
<script type="text/javascript" src="/static/extends/autocomplete/autocomplete.css"></script>
<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label class="layui-form-label required">菜单等级</label>
        <div class="layui-input-block">
            <div id="selectPid"></div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">菜单名称</label>
        <div class="layui-input-block">
            <input type="text" name="title" lay-verify="required" lay-reqtext="菜单名不能为空" placeholder="请输入菜单名" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">菜单类型</label>
        <div class="layui-input-block">
            <input type="radio" name="type" value="0" title="后端" checked="checked">
            <input type="radio" name="type" value="1" title="前端">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">控制器</label>
        <div class="layui-input-block">
            <input type="text" name="controller" placeholder="请输入" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">方法</label>
        <div class="layui-input-block">
            <input type="text" name="action" placeholder="请输入" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择图标</label>
        <div class="layui-input-block">
            <input type="text" id="icon" name="icon" lay-filter="icon" class="hide" value="fa fa-list">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">target属性</label>
        <div class="layui-input-block">
            <input type="radio" name="target" value="_self" title="_self" checked="">
            <input type="radio" name="target" value="_blank" title="_blank">
            <input type="radio" name="target" value="_parent" title="_parent">
            <input type="radio" name="target" value="_top" title="_top">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注信息</label>
        <div class="layui-input-block">
            <textarea name="remark" class="layui-textarea" placeholder="请输入备注信息"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
<script>
    layui.config({
        base: '/static/extends/'
    }).extend({
        iconPickerFa: 'iconPicker/iconPickerFa',
        xmSelect:'xmSelect/xm-select'
    });
    layui.use(['form','iconPickerFa','xmSelect'], function () {
        var form = layui.form,
            layer = layui.layer,
            iconPickerFa = layui.iconPickerFa,
            xmSelect = layui.xmSelect,
            $ = layui.$;

        let selectPid = xmSelect.render({
            el:"#selectPid"
            ,radio:true
            ,name:'pid'
            ,tree: {
                //是否显示树状结构
                show: true,
                //是否展示三角图标
                showFolderIcon: true,
                //是否显示虚线
                showLine: true,
                //间距
                indent: 20,
                //默认展开节点的数组, 为 true 时, 展开所有节点
                expandedKeys: [],
                //是否严格遵守父子模式
                strict: false,
                //是否开启极简模式
                simple: true,
                //点击节点是否展开
                clickExpand: true,
                //点击节点是否选中
                clickCheck: true,
            },
            clickClose:true
            ,data:[]
        })
        hadmin.http("{:url('menu/getMenuTree')}",{},"GET").then(res=>{
            if(res.code === 1){
                selectPid.update({
                    data:res.data
                })
            }
        })
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            hadmin.http("{:url('save')}",data.field).then(res=>{
                if(res.code === 1){
                    var iframeIndex = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(iframeIndex);
                }
            })


            return false;
        });
        iconPickerFa.render({
            elem: '#icon',
            url: "/static/extends/font-awesome-4.7.0/less/variables.less",
            limit: 12,
            click: function (data) {
                $('#icon').val('fa ' + data.icon);
            },
            success: function (d) {
                console.log(d);
            }
        });

    });
</script>